<template>
  <!-- 美敦力Apv线上组件 （主动脉页面）-->
  <div class='tab-custom-3'>
    <!-- 左滑箭头 -->
    <div class='tab-custom-3-leftArrow' v-show='needScroll' @click='toFirstLabel'>
      <!-- -4 为容错区域 -->
      <img v-show='currPostion > -4' src="@/assets/img/icon_arrow_left_disabled@2x.png"/>
      <img v-show='currPostion <= -4' src="@/assets/img/icon_arrow_right@2x.png" style='transform:rotate(180deg);'/>
    </div>
    <div class='tab-custom-3-middle' :ref='labelWrapprtRef'>
      <ul class='middle-list' :ref='labelListRef'>
        <li class='middle-item'
            v-for='(label, index) of labelList'
            :key='"label" + index'
            :class='{active: currLabelId === label.labelId}'
            @click='changeLabel(label.labelId)'>
            {{label.labelName}}
        </li>
      </ul>
    </div>
    <!-- 右滑箭头 -->
    <div class='tab-custom-3-rightArrow' v-show='needScroll' @click='toLastLabel'>
      <!-- 8为容错区域 -->
      <img v-show='currPostion > -maxTranslateWidth + 8 ' src="@/assets/img/icon_arrow_right@2x.png"/>
      <img v-show='currPostion <= -maxTranslateWidth + 8' src="@/assets/img/icon_arrow_left_disabled@2x.png" style='transform:rotate(180deg);'/>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'tabCustom1',
  data () {
    return {
      currLabelId: '',
      labelListRef: 'labelListRef' + new Date().getTime(),
      labelWrapprtRef: 'labelWrapprtRef' + new Date().getTime(),
      bScroll: null,
      listWidth: 0, // 所有栏目li总宽度
      firstLabel: null,
      lastLabel: null,
      currPostion: 0,
      totalWidth: 0, // 栏目外层ul宽度
      wrapperBoxWidth: 0, // bScroll外部容器宽度
      maxTranslateWidth: 0, // bScroll的最大滑动距离
      needScroll: false
    }
  },
  props: {
    labelList: {
      type: Array,
      default () {
        return []
      }
    },
    activeLabelId: {
      type: String,
      default () {
        return ''
      }
    }
    // bgColor: {
    //   type: String,
    //   default: 'rgb(61, 181, 255)'
    // }
  },
  methods: {
    init () {
      if (this.activeLabelId) {
        this.currLabelId = this.activeLabelId
        this.$nextTick(() => {
          this.initListBanner()
        })
      } else if (this.labelList && this.labelList[0]) {
        this.currLabelId = this.labelList[0].labelId
        this.$nextTick(() => {
          this.initListBanner()
        })
      }
    },
    changeLabel (labelId) {
      this.currLabelId = labelId
      this.$emit('change', this.currLabelId)
    },
    initListBanner () {
      // 计算出栏目列表的总长度
      let listWrapper = this.$refs[this.labelListRef]
      let listItemsArr = Array.prototype.slice.call(listWrapper.childNodes)
      this.listWidth = 0
      let length = listItemsArr.length
      listItemsArr.forEach((item, index) => {
        if (index === 0) {
          this.firstLabel = item
        }
        if (index === length - 1) {
          this.lastLabel = item
        }
        this.listWidth += item.offsetWidth
      })
      // 计算出外层ul总宽度
      this.totalWidth = this.listWidth + 60 // 60为左右padding值
      listWrapper.style.width = this.totalWidth + 'px'
      // 获取bScroll的外层容器
      let wrapperBox = this.$refs[this.labelWrapprtRef]
      this.wrapperBoxWidth = wrapperBox.offsetWidth
      // 获取bScroll的最大滑动距离
      this.maxTranslateWidth = this.totalWidth - this.wrapperBoxWidth
      // 如果需要滑动， 则调用bscroll
      if (this.maxTranslateWidth > 0) {
        this.needScroll = true
        setTimeout(() => {
          this.bScroll = new BScroll(wrapperBox, {
            scrollX: true,
            eventPassthrough: 'vertical'
          })
          this.bScroll.on('scrollEnd', ({ x, y }) => {
            this.currPostion = x
          })
        }, 1000)
      } else {
        this.needScroll = false
        listWrapper.style.width = this.listWidth + 'px'
      }
    },
    toFirstLabel () {
      this.bScroll.scrollToElement(this.firstLabel, 300, -30)
    },
    toLastLabel () {
      this.bScroll.scrollToElement(this.lastLabel, 300)
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.tab-custom-3
  position relative
  height 42px !important
  overflow hidden
  border-bottom 1px solid rgba(242, 242, 242, 1)
  .tab-custom-3-leftArrow, .tab-custom-3-rightArrow
    position absolute
    z-index 10
    width 40px
    img
      position absolute
      top 0
      bottom 0
      margin auto
      width 5px
      height 9px
  .tab-custom-3-leftArrow
    left 0
    top 0
    bottom 0
    // background:linear-gradient(-90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.78) 46%,rgba(255,255,255,1) 100%);
    background:linear-gradient(-90deg,rgba(249, 250, 251, 0) 0%,rgba(249, 250, 251, 0.78) 46%,rgba(249, 250, 251, 1) 100%);
    img
      left 15px
  .tab-custom-3-rightArrow
    right 0
    top 0
    bottom 0
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.78) 46%,rgba(255,255,255,1) 100%);
    img
      right 15px
  .tab-custom-3-middle
    flex 1
    overflow hidden
    transform rotate(0deg)
    .middle-list
      display flex
      justify-content center
      .middle-item
        position relative
        flex none
        color rgba(32, 33, 37, 0.5)
        line-height 42px
        text-align center
        padding 0 15px
        font-size 14px
        &.active
          // color rgba(47, 179, 227, 1)
          color #3db5ff
          font-weight 700
          &::before
            content ''
            display block
            position absolute
            bottom 1px
            left 13px
            right 13px
            height 2px
            background rgba(47, 179, 227, 1)
            background #3db5ff
        span
          display inline-block
          font-size 13px
          vertical-align middle

</style>
